<template>
  <div>
    <h-ccard v-if="type == 'normal'" title="快捷常用功能" style="height: 492px">
      <a-row :gutter="[20, 16]">
        <a-col :span="24" v-for="(item, i) in toolList" :key="i" @click.stop="toURL(item.path, item)">
          <a-dropdown placement="topCenter" v-if="i == 0">
            <div @click="e => e.preventDefault()">
              <h-card
                :content="item.content"
                :url="item.url"
                :imgW="item.w"
                :type="item.type"
                :disable="item.disabled"
                showDown></h-card>

            </div>
            <a-menu slot="overlay" class="theme-drap3">
              <a-menu-item v-for="(el) in urgentMatter" :key="el.id">
                <div @click="selectEvent(el)" :class="['theme-flex cockpit-down-span']">
                  <!-- <div class="theme-rect" :style="{backgroundColor: el.label}"></div> -->
                  <span>{{ el.title | htmlFilter }}</span>
                </div>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <h-card
            v-else
            :content="item.content"
            :url="item.url"
            :imgW="item.w"
            :type="item.type"
            :disable="item.disabled"></h-card>
        </a-col>
      </a-row>
    </h-ccard>

    <h-ccard v-else-if="type == 'danger'" title="快捷常用功能" style="height: 390px">
      <a-row :gutter="[20, 20]">
        <a-col @click.stop="toURL(item.path, item)" :span="24" v-for="(item, i) in toolList2" :key="i">
          <h-card
            :align="i == 0 ? 'center' : 'left'"
            class="toolList-card"
            :content="item.content"
            :url="item.url"
            :imgW="item.w"
            :type="item.type"></h-card>
        </a-col>
      </a-row>
    </h-ccard>

    <!-- 新增事件线索 -->
    <createEventClue v-model="eventShow" @submit="reload" />

    <!-- 通知下发 -->
    <createNotice v-model="noticeShow" @submit="submit" />

    <createEvent v-model="createEventShow" :showMB="true" @submit="refresh" />

    <!-- 专网数据同步 -->
    <createData v-model="dataShow" @submit="submit" />

  </div>

</template>

<script>
import moment from 'moment';

import createEvent from './createEvent';
import createEventClue from './createEventClue';
import createNotice from './createNotice';
import createData from './createData';
import { getEventEmergencyList } from '@/api/serve';

export default {
  inject: ['refresh'],
  props: {
    type: {
      default: 'normal',
      type: String
    }
  },
  components: {
    createEvent,
    createEventClue,
    createNotice,
    createData
  },
  data() {
    return {
      moment,
      checked: false,
      toolList: [
        {
          content: '进入事件应急驾驶舱',
          // url: require('@/assets/Image/icon/tool8.png'),
          w: 37,
          type: 'primary'
          // disabled: true

        },
         {
          content: '数据统计',
          url: require('@/assets/Image/icon/tool8.png'),
          w: 37,
          type: 'success',
          path: '/dataview/index'
        },
        {
          content: '创建事件',
          url: require('@/assets/Image/icon/tool1.png'),
          w: 37,
          type: 'primary',
          action: 'createEventShow'
        },
        {
          content: '值班报送',
          url: require('@/assets/Image/icon/tool2.png'),
          w: 37,
          type: 'primary',
          path: '/reportOnDuty'
        },
        // {
        //   content: '新增事件线索',
        //   url: require('@/assets/Image/icon/tool3.png'),
        //   w: 37,
        //   type: 'success',
        //   action: 'eventShow'
        // },
        // {
        //   content: '分享链接管理',
        //   url: require('@/assets/Image/icon/tool4.png'),
        //   w: 37,
        //   type: 'success',
        //   path: '/shareLink/index'
        // },
        // {
        //   content: ' ',
        //   url: require('@/assets/Image/icon/tool6.png'),
        //   w: 37,
        //   type: 'info',
        //   action: 'noticeShow'
        // },
        {
          content: '事件存档',
          url: require('@/assets/Image/icon/tool5.png'),
          w: 37,
          type: 'info',
          path: '/saveEvent',
          query: {
            level: 0
          }
        },

        {
          content: '',
          w: 37,
          type: 'info',
          disabled: true
        }
      ],
      toolList2: [
        {
            content: '创建事件',
            url: require('@/assets/Image/icon/tool1.png'),
            w: 37,
            type: 'primary',
            action: 'createEventShow'
        },
        {
            content: '指令模板',
            url: require('@/assets/Image/icon/tool-mb.png'),
            w: 37,
            type: 'success',
            path: '/insTemplate'
        },
        {
            content: '指令计划',
            url: require('@/assets/Image/icon/tool-jh.png'),
            w: 37,
            type: 'success',
            path: '/insPlan'
        }
        // {
        //     content: '事件存档',
        //     url: require('@/assets/Image/icon/tool5.png'),
        //     w: 37,
        //     type: 'info',
        //     path: '/saveEvent'
        // },
        // {
        //     content: '通知下发',
        //     url: require('@/assets/Image/icon/tool6.png'),
        //     w: 37,
        //     type: 'info',
        //     action: 'noticeShow'
        // }
        // {
        //     content: '专网数据同步',
        //     url: require('@/assets/Image/icon/tool7.png'),
        //     w: 37,
        //     type: 'info',
        //     action: 'dataShow'
        // },
        // {
        //     content: '分享链接管理',
        //     url: require('@/assets/Image/icon/tool-share.png'),
        //     w: 37,
        //     type: 'info',
        //     path: '/shareLink/index'
        // }
      ],

      eventShow: false,
      eventForm: {},
      noticeShow: false,
      noticeForm: {},
      dataShow: false,
      dataForm: {},
      createEventShow: false,
      createEventForm: {},
      urgentMatter: []
    };
  },
  created() {
    this.reloadTime();
    this.geturgentMatter();
  },
  methods: {
    reloadTime() {
      this.toolList[5].content = `
      <div style="text-align: center">专网数据同步时间</div>
      <div style="text-align: center">${moment().format('YYYY-MM-DD HH:mm')}</div>
      `;
    },
    reload() {
      console.log('refresh');
      this.refresh();
    },
    geturgentMatter() {
      getEventEmergencyList().then(res => {
          this.urgentMatter = res.data.map(e => {
            return {
              ...e
              // title: e.title.length >= 40 ? e.title.substring(0, 40) + '...' : e.title
            };
          });
          console.log(this.urgentMatter);
      });
    },
    toURL(path, item) {
      const query = item.query ? item.query : {};
      if (path) {
        // 打开新标签
       const href = this.$router.resolve({ path, query }).href;
        window.open(href, '_blank');
      }
      if (item && item.action) {
        const that = this;
        that[item.action] = true;
      }
    },
    submit() {

    },

    select(e) {
      console.log(e);
    },
    selectEvent({ id, title }) {
      this.$router.replace({ path: '/cockpit/home', query: { id, title } });
      // this.refresh();
    }
  }
};
</script>

<style lang="less">
  .toolList-card.hcard {
    height: 80px !important;

  }
  .theme-drap3 {
    max-width: 400px;
    .ant-dropdown-menu-item {
      white-space: normal;
    }
    }
</style>
